<template>
  <el-container v-infinite-scroll="load" :infinite-scroll-disabled="disabled">
    <div class="container">
      <div class="side-tools">
        <router-link
          custom
          :to="{ path: `/forum/${id}/edit` }"
          v-slot="{ route }"
        >
          <div class="do-post item" @click="clickDoPost(route)">
            <div class="do-post-wrapper item-wrapper">
              <div class="el-icon-edit icon"></div>
              <div>发帖</div>
            </div>
          </div>
        </router-link>
        <router-link
          v-if="this.auth == 'owner' || this.auth == 'admin'"
          custom
          :to="{ path: `/forum/${id}/admin` }"
        >
          <div class="item">
            <div class="item-wrapper">
              <div class="el-icon-setting icon"></div>
              <div>管理</div>
            </div>
          </div>
        </router-link>
      </div>
      <div class="top-wrapper">
        <div
          :style="{
            backgroundImage: `url(${forumInfo.bgImg})`,
            backgroundPosition: 'center,center',
          }"
          class="top-banner"
        ></div>
        <div class="top-forum-detail">
          <el-avatar
            fit="contain"
            shape="square"
            :src="forumInfo.avatar"
            :size="150"
          ></el-avatar>
          <div class="detail d-flex">
            <h2 class="forum-title">
              <span>{{ forumInfo.forumName }}</span>
            </h2>
            <el-button
              v-if="!forumInfo.isFollowed"
              @click="handleFollow"
              size="small"
              icon="el-icon-plus"
              >关注</el-button
            >
            <el-button v-else size="small" @click="handleFollow"
              >取消关注</el-button
            >
            <div class="count d-flex">
              <el-statistic
                group-separator=","
                :value="forumInfo.subscribe"
                value-style=" font-size: 12px;color:#ff7f3e;"
              >
                <span class="n-prefix" slot="prefix">关注:</span></el-statistic
              >
              <el-statistic
                group-separator=","
                :value="forumInfo.postCount"
                value-style=" font-size: 12px;color:#ff7f3e;"
              >
                <span class="n-prefix" slot="prefix">文章:</span></el-statistic
              >
            </div>
            <div class="count"></div>
          </div>
          <div class="detail d-flex">
            <p class="forum-title">简介：{{ forumInfo.intro }}</p>
            <div class="belong">
              <span>类别：</span>
              <span>{{ forumInfo.categoryName }}</span>
            </div>
          </div>
        </div>
      </div>
      <div class="sort-type">
        <el-button
          :class="{ active: postPage.orderBy == 1 }"
          @click="handleOrder(1)"
          size="small"
          icon="el-icon-s-comment"
          plain
          >最新回复</el-button
        >
        <el-button
          :class="{ active: postPage.orderBy == 2 }"
          @click="handleOrder(2)"
          size="small"
          icon="el-icon-s-promotion 
"
          plain
          >最新发帖</el-button
        >
      </div>
      <div class="main">
        <div class="content">
          <forum-article
            v-for="p in postList"
            :key="p.postId"
            :post="p"
          ></forum-article>
          <footer-loading :loading="loading" :noMore="noMore"></footer-loading>
        </div>
        <div class="side">
          <side-item>
            <template v-slot:title>热门帖子</template>
            <template>
              <el-timeline>
                <el-timeline-item
                  v-for="p in hotPostList"
                  :key="p.postId"
                 
                >
                  <router-link  :to="{ name: 'post', params: { postId: p.postId } }">
                    <p class="title">{{ p.title }}</p>
                  </router-link>
                </el-timeline-item>
              </el-timeline>
            </template>
          </side-item>
        </div>
      </div>
    </div>
  </el-container>
</template>

<script>
import ForumArticle from "@/components/ForumItems/ForumArticle.vue";
import SideItem from "@/components/SideItems/SideItem.vue";
import forumApi from "@/axios/forumApi";
import postApi from "@/axios/postApi";
import FooterLoading from "@/components/CommonItems/FooterLoading.vue";
import axios from "axios";
import adminApi from "@/axios/adminApi";
import banApi from "@/axios/banApi";
export default {
  props: ["id"],
  data() {
    return {
      forumInfo: {},
      postPage: {
        current: 1,
        size: 10,
        pages: 0,
        orderBy: 1,
      },
      postList: [],
      hotPostList: [],
      loading: true,
      auth: "",
      isBanned: false,
    };
  },
  components: { ForumArticle, SideItem, FooterLoading },
  methods: {
    handleOrder(o) {
      if (o == this.postPage.orderBy) return;
      this.postPage.orderBy = o;
      this.postPage.current = 1;
      this.postList = [];
      this.loading = true;
      this.fetchPostList();
    },
    handleFollow() {
      if (this.forumInfo.isFollowed)
        forumApi.unfollow(this.id).then(({ data }) => {
          if (data.code === this.$status.SUCCESS_CODE) {
            this.$message.success("取消关注成功");
            this.forumInfo.isFollowed = false;
          } else {
            this.$message.error("获取数据错误");
          }
        });
      else
        forumApi.follow(this.id).then(({ data }) => {
          if (data.code === this.$status.SUCCESS_CODE) {
            this.$message.success("关注成功");
            this.forumInfo.isFollowed = true;
          } else {
            this.$message.error("获取数据错误");
          }
        });
    },
    getForumInfo(id) {
      forumApi.getForumInfo(id).then(({ data }) => {
        this.forumInfo = data.data;
        document.title = this.forumInfo.forumName;
      });
    },
    fetchPostList() {
      postApi
        .fetchPostList({
          orderBy: this.postPage.orderBy,
          current: this.postPage.current,
          size: this.postPage.size,
          forumId: this.id,
        })
        .then(({ data }) => {
          this.postList.push(...data.data.records);
          this.postPage.pages = data.data.pages;
          this.loading = false;
        });
    },
    getAuthInfo() {
      adminApi.getAuthInfo({ forumId: this.id }).then(({ data }) => {
        this.auth = data.data;
      });
    },
    getIsBanned() {
      banApi
        .getIsBanned({ forumId: this.id, userId: this.userInfo.userId })
        .then(({ data }) => {
          this.isBanned = data.data;
        });
    },
    load() {
      this.loading = true;
      this.postPage.current++;
      setTimeout(() => {
        this.fetchPostList();
      }, 500);
    },
    fetch() {
      this.getForumInfo(this.id);
      this.fetchPostList();
      postApi.fetchHot({ forumId: this.id }).then(({ data }) => {
        this.hotPostList.push(...data.data);
      });
      if (this.isLogin) {
        this.getAuthInfo();
        this.getIsBanned();
      }
    },
    clickDoPost(route) {
      console.log(route);
      if (this.isBanned) {
        this.$message.warning("该用户已被封禁！");
        return;
      }
      this.$router.push(route);
    },
  },
  computed: {
    noMore() {
      return (
        (this.postPage.current == this.postPage.pages ||
          this.postPage.pages == 0) &&
        !this.loading
      );
    },
    disabled() {
      return this.loading || this.noMore;
    },
  },
  created() {
    this.fetch();
  },
  watch: {
    $route: "fetch",
  },
};
</script>

<style scoped lang="less">
@import "@/assets/less/common.less";
.el-container {
  height: 100%;
  overflow-y: scroll;
}
.container {
  width: 1000px;
  margin: 0 auto;
  position: relative;
  .side-tools {
    position: fixed;
    top: 50%;
    right: calc(50% - 510px);
    width: 70px;

    text-align: center;
    line-height: 70px;
    background: var(--text-primary);
    transform: translateX(100%);
    z-index: 9999;
    cursor: pointer;
    .item {
      width: 100%;
      height: 70px;
      font-size: 25px;
      color: #fff;
      overflow: hidden;
      .item-wrapper {
        transition: 0.2s;
      }
      .item-wrapper:hover {
        transform: translateY(-50%);
      }
      .icon::before {
        line-height: 70px;
      }
    }
  }
}

.top-wrapper {
  .top-banner {
    height: 235px;
    background-size: cover;
  }
  .top-forum-detail {
    position: relative;
    background: #f3f5f8;
    height: 112px;
    padding-left: 200px;
    .el-avatar {
      position: absolute;
      bottom: 20px;
      left: 20px;
    }
    .detail > * {
      margin-right: 20px;
    }
    .detail {
      height: 40px;
      align-items: center;
      .forum-title {
        line-height: 32px;
        font-weight: 400;
      }
      .el-button {
        height: 30px;
      }
      .count {
        .el-statistic {
          margin-right: 15px;
        }
        .n-prefix {
          font-size: 12px;
          color: @regularText;
          white-space: nowrap;
        }
      }
    }
  }
}
.sort-type {
  margin-top: 20px;
}
.main {
  display: flex;
  justify-content: space-between;
}
.el-button:focus {
  color: #606266;
  background: #fff;
  border: 1px solid #dcdfe6;
}
.el-button.active {
  color: #409eff;
  border-color: #c6e2ff;
  background-color: #ecf5ff;
}
</style>